<template>
  <div class="container-xl my-home-div">
    <div class="my-home-div-line  row">
      <div class="col">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-icon_team_Notepad"></use>
        </svg>
        团队题单
      </div>
      <div class="col top-0 text-right" v-if="isAdmin">
        <el-button @click="dialogVisible = true" type="primary" size="default">添加团队题单</el-button>
      </div>
    </div>
    <div class="row min-height" v-if="getquestionbankcount" v-loading="loading">
      <div class="col">
        <table class="table">
          <tbody>
            <tr class=" thead">
              <td width="120">编号</td>
              <td scope="col">题单</td>
              <td width="80" class="m-border-2  text-center">题单题目数</td>
              <td width="110" class="m-border-2  text-center">我的提交题目数</td>
              <td width="80" class="m-border-2  text-center">我的AC率</td>
              <td class="text-center" v-if="isAdmin" width="172">查看统计</td>
              <td class="text-center" v-if="isAdmin" width="80">删除</td>
            </tr>
            <router-link custom v-for="(v, key) in getquestionbank" :key="key"
              :to="{ name: '题库列表', params: { ID: v.ID } }" v-slot="{ navigate, isActive }">
              <tr :active="isActive">
                <td @click="navigate">{{ v.ID }}</td>
                <td class="cu" @click="navigate">
                  <span v-text="v.name"></span>
                  &nbsp;&nbsp;&nbsp;
                  <button v-show="index(v.userquestion)"
                    class="btn btn-primary rounded-pill border-white shadow">最近提交</button>
                </td>
                <td class="text-center m-border-2 " v-text="v.questionquestionbank?.length"></td>
                <td class="text-center m-border-2 " v-text="v.count"></td>
                <td class="text-center m-border-2 "
                  v-text="v.ACcount ? Math.floor(Number(v.ACcount / v.questionquestionbank?.length) * 100) + '%' : 0">
                </td>
                <td v-if="isAdmin">
                  <router-link v-slot="{ href }" :custom="true" :to="{ name: '成员测评记录', query: { questionbankid: v.ID } }">
                    <a target="_blank" :href="href" :style="{
                      marginRight: '6px', display: 'inline-block'
                    }">
                      <el-button v-show="isAdmin" size="default">
                        评测记录
                      </el-button>
                    </a>
                  </router-link>
                  <router-link v-slot="{ href }" :custom="true" :to="{ name: '题目排行榜', query: { questionbankid: v.ID } }">
                    <a target="_blank" :href="href" :style="{ display: 'inline-block' }">
                      <el-button v-show="isAdmin" size="default">
                        成员统计
                      </el-button>
                    </a>
                  </router-link>
                </td>
                <td v-if="isAdmin" class="text-center">
                  <el-button size="default" @click="del(Number(v.ID))">删除</el-button>
                </td>
              </tr>
            </router-link>
          </tbody>
        </table>
      </div>
    </div>
    <div class="row" v-if="getquestionbankcount">
      <div class="col text-right">
        <el-pagination :page-size="limit" :total="getquestionbankcount" @current-change="change"
          layout="prev, pager, next" :current-page="Math.floor(offset / limit) + 1"></el-pagination>
      </div>
    </div>
    <el-empty v-if="!getquestionbankcount" image="https://cdn.hterobot.com/JOY/oj_1_1/Not%20Found%20illustration.png" />
    <el-dialog v-model="dialogVisible" title="选择题单" width="840px" :before-close="start">
      <Addselectquestionbank :addclick="addclick" :teamid="getteam.filter(e => e.ID !== p.data?.ID).map(e => e.ID)">
      </Addselectquestionbank>
    </el-dialog>
  </div>
</template>


<script setup lang="ts">
import { Storekey } from "../../../interface";
import Studycodemodel from "../../../mysql_interface/studycodemodel";
import { debounce } from "underscore";
import Addselectquestionbank from "./addselectquestionbank.vue";

import {
  computed,
  onMounted,
  ref,
  watch,
} from "vue";
import { useStore } from "vuex";
import { badgeType } from "./type";
import { asyncaddquestionbankteam, asyncdelquestionbankteam, asyncselectquestionbank } from "../../../api";
import { ElMessage, ElMessageBox } from "element-plus";
const p = defineProps<{
  data?: Studycodemodel.Iteam,
  changeteam?: (str: Studycodemodel.Iteam) => void,
  isAdmin?: 0 | 1 | 2
  user?: Studycodemodel.Iuser
  teamusers?: Studycodemodel.Iteamuser[]
  getUsers?: Function
  badge?: badgeType
}>()

const dialogVisible = ref(false)

const getlabel = computed(() => {
  return store.state.label?.rows || []
})
const getquestionbank = ref<Studycodemodel.Iquestionbank[]>([])
const name = ref("");
const getquestionbankcount = ref(0)
const loading = ref(true)
const store = useStore(Storekey);

const getteam = computed(() => {
  return store.state.team?.rows || []
})

const order = ref<keyof Studycodemodel.Iquestionbank>("ID");
const offset = ref(0);
const limit = ref(10);

const teamid = computed(() => {
  return p.data?.ID || 0;
});

watch(() => teamid.value, () => {
  offset.value = 0;
});

watch([offset, order, limit, name], () => {
  start();
});
function index(v: any) {
  if (!v) return false;
  const [x] = v;
  if (x) {
    const z = new Date(x.createdAt).getTime() || Date.now();
    return Date.now() < z + 1000 * 60 * 60 * 24 * 7;
  }
  return false;
}

onMounted(() => {
  start();
});
function debounce1() {
  return debounce(() => {
    let _like;
    if (name.value) {
      _like = ["name", name.value];
    }
    dialogVisible.value = false
    loading.value = true
    asyncselectquestionbank({
      _order: order.value,
      _offset: offset.value,
      _limit: limit.value,
      _like,
      teamid: teamid.value,
      usertype: "team",
    }).then(e => {
      loading.value = false
      getquestionbank.value = e.rows
      getquestionbankcount.value = e.count
    })
  }, 300);
}
const start = debounce1();

function change(r: number) {
  offset.value = (r - 1) * limit.value;
}



async function del(id: number) {
  ElMessageBox.confirm("确定要删除此题单", "删除", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      try {
        await asyncdelquestionbankteam({ questionbankid: id, teamid: teamid.value });
        ElMessage({
          message: "删除成功",
          type: "success",
        });
        start()
      } catch (e) {
        ElMessage({
          message: String(e),
          type: "error",
        });
      }
    })
    .catch(() => {

    });
}

async function addclick(v: Studycodemodel.Iquestionbank) {
  await asyncaddquestionbankteam({ questionbankid: v.ID, teamid: teamid.value }).then(() => {
    ElMessage.success('添加成功')
  }).catch(f => {
    ElMessage.error(f)
  })
}



</script>
<style scoped>
.my-home-div {
  --bs-gutter-x: 0;
  --my-home-div-height: 56px;
}

.cu {
  cursor: pointer;
}

tr {
  line-height: 56px;
}

td {
  padding: 0 !important;
}


.min-height {
  --bs-gutter-x: 0;
}


.min-height .col {
  padding: 12px;

}

.thead {
  font-weight: 700;
  height: 30px;
  line-height: 29px;
}


.question-label {
  line-height: 24px;
  height: 48px;
  display: grid;
  --el-color-primary-light-8: var(--color-cheng);
  align-content: center;
}

.question-label div {
  max-height: 48px;
}

.question-label .el-tag--small {
  margin-right: 2px;
}
</style>